<template>
    <div>
        <a-card style="border-radius: 0px !important">
            <a-avatar
                :size="64"
                style="float: left"
                src="https://image.huos77.cn/img/avator.jpg"
            >
            </a-avatar>
            <div style="float: left; margin-left: 20px">
                <div style="font-size: 18px; margin-top: 2px">热 耳</div>
                <div style="margin-top: 9px">博客后台管理系统</div>
            </div>
            <div style="float: right; width: 380px">
                <a-row :gutter="16">
                    <a-col :span="8">
                        <a-statistic title="项目" :value="5"> </a-statistic>
                    </a-col>
                    <a-col :span="8">
                        <a-statistic title="排名" :value="1"> </a-statistic>
                    </a-col>
                    <a-col :span="8">
                        <a-statistic title="团队" :value="1"> </a-statistic>
                    </a-col>
                </a-row>
            </div>
        </a-card>
        <page-layout>
            <a-row :gutter="[10, 10]">
                <a-col :xs="24" :lg="18" :xxl="18">
                    <a-card title="项目">
                        <a-card-grid class="card" :hoverable="false">
                            <a-avatar
                                src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png"
                            ></a-avatar>
                            <span class="card-title">电商后台可视化</span>
                            <div class="card-describe">电商后台可视化</div>
                            <div class="card-bottom">
                                <div class="group">王灿</div>
                                <div class="date">7月12日</div>
                            </div>
                        </a-card-grid>
                        <a-card-grid class="card" :hoverable="false">
                            <a-avatar
                                src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"
                            ></a-avatar>
                            <span class="card-title">电商后台管理系统</span>
                            <div class="card-describe">电商后台管理系统</div>
                            <div class="card-bottom">
                                <div class="group">王灿</div>
                                <div class="date">8月12日</div>
                            </div>
                        </a-card-grid>
                        <a-card-grid class="card" :hoverable="false">
                            <a-avatar
                                src="https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png"
                            ></a-avatar>
                            <span class="card-title">个人博客系统</span>
                            <div class="card-describe">个人博客系统</div>
                            <div class="card-bottom">
                                <div class="group">王灿</div>
                                <div class="date">9月12日</div>
                            </div>
                        </a-card-grid>
                        <a-card-grid class="card" :hoverable="false">
                            <a-avatar
                                src="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png"
                            ></a-avatar>
                            <span class="card-title">网易云播放器</span>
                            <div class="card-describe">网易云播放器</div>
                            <div class="card-bottom">
                                <div class="group">王灿</div>
                                <div class="date">10月12日</div>
                            </div>
                        </a-card-grid>
                        <a-card-grid class="card" :hoverable="false">
                            <a-avatar
                                src="https://www.runoob.com/wp-content/uploads/2016/02/react.png"
                            ></a-avatar>
                            <span class="card-title">博客后台管理系统</span>
                            <div class="card-describe">博客后台管理系统</div>
                            <div class="card-bottom">
                                <div class="group">王灿</div>
                                <div class="date">10月12日</div>
                            </div>
                        </a-card-grid>
                        <a-card-grid class="card" :hoverable="false">
                            <a-avatar
                                src="https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png"
                            ></a-avatar>
                            <span class="card-title">博客后端接口api</span>
                            <div class="card-describe">博客后端接口api</div>
                            <div class="card-bottom">
                                <div class="group">王灿</div>
                                <div class="date">12月12日</div>
                            </div>
                        </a-card-grid>
                    </a-card>
                    <a-card title="动态" style="margin-top: 10px">
                        <a-list item-layout="horizontal" :data-source="data">
                            <template v-slot:loadMore>
                                <div
                                    v-if="showLoadingMore"
                                    class="demo-loadmore"
                                >
                                    <a-spin v-if="loadingMore" />
                                    <a-button v-else @click="loadMore">
                                        加载更多
                                    </a-button>
                                </div>
                                <div
                                    v-else
                                    class="demo-loadmore"
                                    style="color: gray"
                                >
                                    没有更多啦~
                                </div>
                            </template>
                            <template #renderItem="{ item }">
                                <a-list-item>
                                    <a-list-item-meta :description="item.info">
                                        <template #title>
                                            {{ item.title }}
                                        </template>
                                        <template #avatar>
                                            <a-avatar :src="item.avatar" />
                                        </template>
                                    </a-list-item-meta>
                                </a-list-item>
                            </template>
                        </a-list>
                    </a-card>
                </a-col>
                <a-col :xs="24" :lg="6" :xxl="6">
                    <a-card title="快捷">
                        <a-row :gutter="[10, 10]">
                            <a-col :span="8">
                                <quick
                                    color="rgb(255, 214, 102)"
                                    icon="NotificationFilled"
                                    title="消息"
                                >
                                </quick>
                            </a-col>
                            <a-col :span="8">
                                <quick
                                    color="rgb(179, 127, 235)"
                                    icon="MailFilled"
                                    title="邮件"
                                >
                                </quick>
                            </a-col>
                            <a-col :span="8">
                                <quick
                                    color="rgb(255, 156, 110)"
                                    icon="CustomerServiceFilled"
                                    title="访问"
                                >
                                </quick>
                            </a-col>
                            <a-col :span="8">
                                <quick
                                    color="rgb(105, 192, 255)"
                                    icon="BuildFilled"
                                    title="用户"
                                >
                                </quick>
                            </a-col>
                            <a-col :span="8">
                                <quick
                                    color="rgb(255, 133, 192)"
                                    icon="TrophyFilled"
                                    title="排名"
                                >
                                </quick>
                            </a-col>
                            <a-col :span="8">
                                <quick
                                    color="rgb(149, 222, 100)"
                                    icon="CloudFilled"
                                    title="首页"
                                >
                                </quick>
                            </a-col>
                        </a-row>
                    </a-card>
                    <a-card title="欢迎" style="margin-top: 10px">
                        <a-result title="Hello Word!">
                            <template #icon>
                                <smile-twoTone />
                            </template>
                            <template #extra>
                                <a-button type="primary">Next</a-button>
                            </template>
                        </a-result>
                    </a-card>
                </a-col>
            </a-row>
        </page-layout>
    </div>
</template>
<script>
import { SmileTwoTone } from '@ant-design/icons-vue'
import { getDynamic } from '@/api/index.js'
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import { createDynamic } from '@/tools/bussiness.js'

const PAGE_SIZE = 3
export default {
    components: {
        SmileTwoTone,
    },
    setup() {
        const store = useStore()
        const data = ref([])
        const page = ref(1)
        const tagNum = store.getters.tagNum
        const loadingMore = ref(false)
        let showLoadingMore = computed(() => {
            if (page.value * PAGE_SIZE == tagNum) return false
            else {
                return true
            }
        })
        const getData = async (callback) => {
            const { data: r } = await getDynamic({
                pageSize: PAGE_SIZE,
                page: page.value,
            })
            console.log('@@@@', r)
            callback(r)
        }
        const loadMore = () => {
            loadingMore.value = true
            page.value++
            getData((r) => {
                const newdata = r.results.map((e) => {
                    return createDynamic(e)
                })
                data.value = data.value.concat(newdata)
                loadingMore.value = false
            })
        }

        getData((r) => {
            data.value = r.results.map((e) => {
                return createDynamic(e)
            })
        })

        return {
            data,
            showLoadingMore,
            loadMore,
            loadingMore,
        }
    },
}
</script>
<style lang="less" scoped>
.ant-list-item-meta-description {
    line-height: 28px;
}
.card {
    width: 33.33%;
    height: 170px;
    line-height: 28px;
    border-top: none;
    border-left: none;
}
.card-title {
    margin-left: 15px;
    font-weight: 600;
}
.card-describe {
    margin-top: 10px;
    height: 60px;
}
.demo-loadmore {
    text-align: center;
    margin-top: 12px;
    height: 32px;
    line-height: 32px;
}
.card-bottom {
    margin-top: 5px;
    .group {
        float: left;
        font-size: 13.5px;
    }
    .date {
        float: right;
        font-size: 13.5px;
    }
}
</style>
